<template>
  <basePage :show-tabbar="false" :page-params="pageParams">
    <view class="list-bg">
      <view class="pop-title">
        <!-- <image
          class="icon-left"
          src="/static/shopIcon/back@2x.png"
          @click="backPrePage"
        /> -->
        <view class="title">配送方式</view>
        <view
          class="close"
          @click="closePopFn"
        >
          <image
            class="close-icon"
            src="/static/image/close.png"
          />
        </view>
      </view>
      <view class="left-title-box">
        最长边 {{ skuSizeInfo.maxEdge }}米；总体积 {{ skuSizeInfo.totalWeight }}立方米；重量 {{ skuSizeInfo.totalWeight }}公斤
      </view>
      <view class="pop-content">
        <template>
          <scroll-view class="item-content" scroll-x="true">
            <view
              v-for="(item, index) in storeTypeList"
              :key="index"
              :class="storeType == item.id ? 'class-item-select class-item' : 'class-item'"
              @click="selectItemFn('storeType', item.id)"
            >
              {{ item.name }}
            </view>
          </scroll-view>
        </template>
        <scroll-view class="scroll-content" :scroll-y="true" style="height: 780rpx;margin-top: 20rpx;">
          <template v-if="storeType==1">
            <view
              v-for="(item,index) in curSelfAddressModelObj.selfTakeAddressList"
              :key="index"
              :class="shipAddId == item.ship_add_id ? 'scroll-item scroll-item-active' : 'scroll-item'"
              @click="selectSelfAddressFn(item)"
            >
              <view class="store-name">{{ item.add_alias }}</view>
              <view class="address-box">
                <view class="store-address">{{ item.provinceName }}{{ item.cityName }}{{ item.areaName }}{{ item.streetName }}{{ item.detail_address }}</view>
                <view v-if="item.distance" class="distance">{{ item.distance | distanceFilter }}</view>
              </view>
            </view>
          </template>
          <template v-if="storeType==2">
            <view
              v-for="(item,index) in curSelfAddressModelObj.logisticsCenterAddressList"
              :key="index"
              :class="shipAddId == item.ship_add_id ? 'scroll-item scroll-item-active' : 'scroll-item'"
              @click="selectSelfAddressFn(item)"
            >
              <view class="store-name">{{ item.add_alias }}</view>
              <view class="address-box">
                <view class="store-address">{{ item.provinceName }}{{ item.cityName }}{{ item.areaName }}{{ item.streetName }}{{ item.detail_address }}</view>
                <view v-if="item.distance" class="distance">{{ item.distance | distanceFilter }}</view>
              </view>
            </view>
          </template>
        </scroll-view>
      </view>
      <view class="btn-box">
        <button class="btn confirm-btn" :plain="true" @click="confirmFn">确定</button>
      </view>
    </view>
  </basePage>
</template>

<script>
import basePage from '@/components/base-page'
export default {
  components: {
    basePage,
  },
  filters: {
    /*米与千米转换*/
    distanceFilter(value) {
      let distance = 0
      if (value < 1000) {
        distance = `${value}m`
      }
      if (value >= 1000) {
        const val = (value / 1000).toFixed(1)
        distance = `${val}km`
      }
      return distance
    }
  },
  props: {
    orderInfo: {
      type: Object,
      default: null
    },
    orderData: {
      type: Object,
      default: null
    },
    selfAddressModelObj: {
      type: Object,
      default: null
    },
    curDeliverWay: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      title: 'Index',
      storeType: 1,
      storeTypeList: [
        {
          name: '门店自提',
          id: '1'
        },
        {
          name: '物流中心自提',
          id: '2'
        }
      ],
      shipAddId: 0,
      selfAddressModel: {},
      addressList: [],
      pageParams: {
        // state: 'ERROR',
        emptyTitle: '信号可能跑到外星球了哦～',
        errorTitle: '请求失败',
        showButton: true
      },
    }
  },
  computed: {
    curOrderInfo() {
      return this.orderInfo
    },
    curOrderData() {
      return this.orderData
    },
    curSelfAddressModelObj() {
      return this.selfAddressModelObj
    },
    // 货物长度、体积、重量信息
    skuSizeInfo() {
      const { maxLength, goodTotalVolume, goodTotalWeight } = this.curOrderData
      const maxEdge = (maxLength / 100).toFixed(2) ?? '' // 最长边
      const volume = (goodTotalVolume / 1000000).toFixed(2)
      const totalVolume = (volume == 0.00 ? 0.01 : volume) ?? '' // 总体积
      const totalWeight = (goodTotalWeight / 1).toFixed(2) ?? '' // 重量
      return { maxEdge, totalVolume, totalWeight }
    }
  },
  mounted() {
    // console.log('selectStore mounted');
    // console.log('storeType :>> ', this.storeType);
    if (Object(this.curSelfAddressModelObj.selfAddressModel).length != 0) {
      this.selfAddressModel = this.curSelfAddressModelObj.selfAddressModel
    }
    this.addressList = this.curSelfAddressModelObj.selfTakeAddressList
    this.shipAddId = this.curSelfAddressModelObj.selfAddressModel ? this.curSelfAddressModelObj.selfAddressModel.ship_add_id : 0
    // console.log('this.curSelfAddressModelObj :>> ', this.curSelfAddressModelObj);
  },
  methods: {
    /*选择按钮方法*/
    selectItemFn(typeName, val) {
      this[typeName] = val
      if (val == 1) {
        this.addressList = this.curSelfAddressModelObj.selfTakeAddressList
        this.initAddres(this.addressList)
      } else {
        this.addressList = this.curSelfAddressModelObj.logisticsCenterAddressList
        this.initAddres(this.addressList)
        console.log(this.curSelfAddressModelObj.selfAddressModel)
      }
    },
    initAddres(data) { //初始化不选择地址的情况下直接点击保存需要重新获取
      data.forEach(item => {
        if (item.ship_add_id == this.shipAddId) {
          this.selfAddressModel = item
        }
      })
    },
    /*选择地址*/
    selectSelfAddressFn(val) {
      this.selfAddressModel = val
      this.shipAddId = val.ship_add_id
    },
    /*确认*/
    confirmFn() {
      this.curSelfAddressModelObj.selfAddressModel = this.selfAddressModel
      this.curSelfAddressModelObj.shipAddId = this.selfAddressModel.ship_add_id
      this.$emit('update:selfAddressModelObj', this.curSelfAddressModelObj)
      this.$emit('selectFn')
      this.$emit('closePopFn')
      // this.backPrePage()
    },
    closePopFn() {
      this.$emit('closePopFn')
    },
    /*返回上一页*/
    backPrePage() {
      this.$emit('update:curDeliverWay', 'zt')
      const backPageParams = {
        customParams: {
          popPage: 'deliverWay'
        },
      }
      this.$emit('backPageFn', backPageParams)
    }
  }
}
</script>

<style scoped lang="scss">
@import "../static/scss/index";
.list-bg{
  height: 1122rpx;
  .icon-left{
    width: 24rpx;
    height: 48rpx;
    float: left;
    margin: 21rpx 24rpx 0 0;
  }
  .item-content{
    height: 74rpx;
    padding-bottom: 32rpx;
    border-bottom: 2rpx solid $uni-grey-e2;
    width: 100%;
    white-space: nowrap;
  }
  .scroll-content{
    height: 900rpx;
    margin-top: 24rpx;
    .scroll-item{
      width: calc(100% - 10rpx);
      margin-bottom: 16rpx;
      background: $uni-grey-f9;
      border-radius: $uni-border-radius-default;
      overflow: hidden;
      padding-bottom: 24rpx;
      .store-name{
        height: 40rpx;
        margin: 24rpx 0 0 24rpx;
        font-size: $uni-font-size-base;
      }
      .address-box{
        padding-bottom: 24rpx;
        .store-address{
          width: calc(100% - 160rpx);
          margin: 10rpx 0 0 24rpx;
          color: $uni-grey-666;
          font-size: $uni-font-size-sm;
          float: left;
        }
        .distance{
          max-width: 106rpx;
          padding: 0 6rpx;
          height: 32rpx;
          line-height: 32rpx;
          color: $uni-white;
          font-size: 20rpx;
          text-align: center;
          float: right;
          border-radius: $uni-border-radius-default;
          margin: 10rpx 16rpx 0 16rpx;
          background: $uni-bg-color-b3;
        }
      }
    }
    .scroll-item-active{
      border: 2rpx solid $uni-orange;
      width: calc(100% - 14rpx);
      .distance{
        background: $uni-orange!important;
      }
    }
  }
  .left-title-box {
    margin: 30rpx 0 30rpx 32rpx;
  }
}
</style>
